<template>
  <div class="pagestyle">
    <list_controller ref="zujianname" :options="state.options" pageName="安装地址管理">
      <template v-slot:opraCurdBtn1="row">
        <span>
          <el-button type="primary" link size="small" @click="deleteBtn(row.row.row)">删除</el-button>
        </span>
      </template>
      <template v-slot:opraCurdBtnAll>
        <el-button class="btn" type="primary" link @click="addBtn('mul')">
          <el-icon style="margin-right: 2px;">
            <svg-icon class-name="search-icon" icon-class="addtotal" />
          </el-icon>新增
        </el-button>
        <el-button class="btn" type="primary" link @click="deleteBtn('mul')">
          <el-icon>
            <DeleteFilled />
          </el-icon>删除
        </el-button>
      </template>
    </list_controller>
    <!-- 新增弹框 -->
    <teleport to="body">
      <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="460" :height="auto" v-model="state.addModal"
        resize :mask="true">
        <template #title>
          <div class="w100 h100 fsc mask_title">新增地址</div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form ref="formRef" :model="state.formData" :rules="state.rules" label-position="top">
              <el-form-item label="安装地点名称" prop="placeName">
                <el-input clearable v-model="state.formData.placeName" placeholder="请输入"></el-input>
              </el-form-item>
            </el-form>
            <div class="form_footer">
              <el-button @click="cancel">取消</el-button>
              <el-button type="primary" @click="submitForm">
                确定
              </el-button>
            </div>
          </div>
        </template>
      </vxe-modal>
    </teleport>
  </div>
</template>
<script setup>
  import list_controller from "@/components/commonCom/list_controller";
  import {
    computed,
    reactive,
    provide
  } from "vue";
  import {
    table_headers
  } from '@/components/commonCom/table_headers';
  import axios from "@/utils/request"
  import usePagesStore from '@/store/modules/pages'
  const {
    proxy
  } = getCurrentInstance();
  const store = usePagesStore()
  components: {
    list_controller
  }
  let state = reactive({
    addModal: false,
    // 列表
    options: {
      tableheads: computed(() => table_headers.placeInfo),
      queryList: {
        dropdownUrl: '',
        querys: [],
        queryMap: new Map([
          ['sensorTypeId', 'safety_pointType'],
          ['deviceTypeId', 'safety_deviceType'],
          ['alarmTypeId', 'alarmType']
        ])

      },
      dataUrl: '/place/info/addressInfo',
      delUrl: '/place/info/deleteAddress',
      addUrl: '/place/info/addAddress'
    },
    // 表单
    formRef: null,
    formData: {},
    rules: {
      placeName: [{
        required: true,
        message: '请输入安装地点名称',
        trigger: 'blur'
      }]
    }
  })
  // 新增按钮
  function addBtn(row) {
    state.addModal = true
    state.formData = {}
  }

  function deleteBtn(row) {
    let ids = []
    if (row != 'mul') {
      ids = [row.id]
    } else {
      if (store.records.length > 0) {
        ids = store.records.map(item => {
          return item.id
        })
      } else {
        proxy.$modal.msgSuccess('请先勾选所要删除数据!');
      }
    }
    if (ids.length > 0) {
      axios.post(state.options.delUrl, ids).then(res => {
        if (res.code == 200) {
          proxy.$refs['zujianname'].getData()
          state.addModal = false
          proxy.$modal.msgSuccess(res.msg);
          store.records = []
        }
      })
    }

  }
  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["formRef"].validate(valid => {
      if (valid) {
        axios.post(state.options.addUrl, state.formData).then(res => {
          if (res.code == 200) {
            proxy.$refs['zujianname'].getData()
            state.addModal = false
            proxy.$modal.msgSuccess(res.msg);
          }
        })
      }
    })
  }

  function cancel() {
    state.addModal = false
  }
</script>
<style scoped>
</style>